<template>
  <div class="computerhead">
    <el-tag v-for="tag in tags" :key="tag.name" :closable="tag.name !== 'home'" :type="tag.type"
      :effect="$route.name === tag.name ? 'dark' : 'plain'" @click="changeMenu(tag)" @close="handleClose(tag, index)">

      {{ tag.name }}
    </el-tag>
  </div>
</template>

<script>

import { mapState, mapMutations } from 'vuex';
export default {
  name: 'MagementComputerhead',

  data() {
    return {

    };
  },

  mounted() {

  },

  methods: {
    ...mapMutations({
      //可以为colseTag方法起别名close
      close: 'colseTag'
    }),
    changeMenu(tag) {
      this.$router.push({
        name: tag.name
      })
    },
    handleClose(tag, index) {
      this.close(tag)
      const length = this.tags.length - 1
      if (tag.name === this.$route.name) {
        return
      } else {
        if (index === length) {
          this.$router.push({
            name: this.tags[index - 1].name
          })
        } else {
          this.$router.push({
            name: this.tags[index].name
          })
        }
      }

    }
  },
  computed: {
    ...mapState({
      tags: state => state.tab.tabList
    })
  }
};
</script>

<style lang="less" scoped>
.computerhead {
  .el-tag {
    margin-right: 4px;
    cursor: pointer;
  }
}
</style>